<template>
  <div class="app">
    <div class="OFFtop">
      <div class="OFFleft f-l">
        <imgBox
          :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/4/images/2018/08/22/15349168217893.jpg',
            url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=250&h=250&f=webp&q=90',
            w:'100%',
            imgh:'460px',
            c:1,
            }"
        ></imgBox>
      </div>
      <div class="OFFright f-l">
        <ul>
          <li class="recommendImg">
            <router-link :to="data.ADmsg.herf">
              <img :src="data.ADmsg.url" style="width:100%" />
            </router-link>
          </li>
          <li v-for="item in data.proList" :key="item.id">
            <router-link :to="{name:'products',params:{proid:item.id}}">
              <img :src="item.url" alt />
            </router-link>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
import imgBox from "@/components/imgBox/imgBox";

export default {
  data() {
    return {};
  },
  props: ["data"],
  methods: {},
  components: {imgBox}
};
</script>

<style lang="scss" type="text/css" scoped>
@import "@/common/style.scss";
$towerSignwidth: 225px;
.OFFtop {
  height: 460px;
  .OFFleft {
    width: $towerSignwidth;
    height: 100%;
    background-color: rgb(206, 206, 206);
  }
  .OFFright {
    width: 975px;
    li:nth-child(1) {
      width: 483px;
    }
    li {
      float: left;
      margin-left: 3px;
      height: 229px;
      width: 240px;
      margin-bottom: 2px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}


.recommendImg {
  float: left;
  width: 470px;
  height: 185px;
}
.groundFloor {
  height: 30px;
  line-height: 30px;
  width: $towerSignwidth;
  background-color: $main-color;
  color: white;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
}
</style>
